<template>
    <div @click="handleClick">
    <a v-if="config.events.redirect" :href="config.events.redirect">
        <component
            :is="config.component"
            ref="component"
            class="component"
            :style="getStyle(config.style)"
            :prop-value="config.propValue"
            :swiper-list="config.swiperList"
            :props="config.props"
            :itemStyle="getComponentStyle(config.style)"
            :tab-list="config.tabList"
            :element="config"
        />
        </a>
        <template v-else>
        <component
            :is="config.component"
            ref="component"
            class="component"
            :style="getStyle(config.style)"
            :prop-value="config.propValue"
            :swiper-list="config.swiperList"
            :props="config.props"
            :itemStyle="getComponentStyle(config.style)"
            :tab-list="config.tabList"
            :element="config"
        />
        </template>
    </div>
</template>

<script>
import { getStyle } from '@/utils/style'
import runAnimation from '@/utils/runAnimation'
import { mixins } from '@/utils/events'

export default {
    mixins: [mixins],
    props: {
        config: {
            type: Object,
            require: true,
            default: () => {},
        },
    },
    mounted() {
        runAnimation(this.$refs.component.$el, this.config.animations)
    },
    methods: {
        getStyle,
        getComponentStyle(style) {
            return getStyle(style, ['top', 'left', 'width', 'height', 'rotate'])
        },
        handleClick() {
            const events = this.config.events
            Object.keys(events).forEach(event => {
                this[event](events[event])
            })
        },
    },
}
</script>

<style lang="scss" scoped>
.component {
    position: absolute;
}
</style>
